<template>
  <div>
    <myheader></myheader>
    <table class>
      <tr>
        <td>商品名称:</td>
        <td>
          <input type="text" v-model="name" />
        </td>
      </tr>
      <tr>
        <td>商品简介:</td>
        <td>
          <!-- <textarea v-model="desc"></textarea> -->
          <quill-editor ref='myTextEditor' @change='editorchange($event)' :content='desc'></quill-editor>
        </td>
      </tr>
      <tr>
        <td>商品价格:</td>
        <td>
          <input type="text" v-model="price" />
        </td>
      </tr>
      <tr>
        <td>所属类型</td>
        <td>
          <input type="text" v-model="cate_id" />
        </td>
      </tr>
      <td colspan="2">商品其他规格</td>
      <tr>
        <td>颜色:</td>
        <td>
          <input type="text" v-model="color" />
        </td>
      </tr>
      <tr>
        <td>尺寸:</td>
        <td>
          <input type="text" v-model="size" />
        </td>
      </tr>
      <tr>
        <td>配置:</td>
        <td>
          <input type="text" v-model="config_value" />
        </td>
      </tr>
      <tr>
        <th>商品标签:</th>
        <!-- <td><input type="text" v-model='tags'></td> -->
        <td>
          <TagInput v-model="tags" split="," type="string"></TagInput>
        </td>
      </tr>
      <tr>
        <Button color="yellow" :circle="true" @click="upd_good">修改商品</Button>
      </tr>
    </table>

    <mytail></mytail>
  </div>
</template>
<script>
  import myheader from "./myheader";
  import mytail from "./mytail";
  import {config} from "../config";
  import {quillEditor} from 'vue-quill-editor';
  // 引入样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    name: "editgood",
    components: {
      myheader: myheader,
      mytail: mytail,
      quillEditor,
    },
    data: function () {
      return {
        id: '',
        name: "",
        desc: "",
        price: 0,
        cate_id: "",
        color: "",
        size: "",
        config_value: "",
        tags: '', // 商品标签变量
        content: '', // 存储编辑器信息
      };
    },
    mounted() {
      this.id = this.$route.query.id;
      this.get_good()
    },
    methods: {
      // 编辑器更改方法
      editorchange:function({editor, html, text}){
        
        this.desc = html;
        console.log(this.desc)

      },
      // 获取商品信息
      get_good: function () {
        // 获取商品详情
        this.axios.get(config['gooditem'], {
          params: {
            id: this.id
          }
        }).then(res => {
          this.name = res.data.name;
          this.price = res.data.price;
          this.desc = res.data.desc;
          this.cate_id = res.data.cate_id;
          var params = JSON.parse(res.data.parms)
          this.color = params.color;
          this.size = params.size;
          this.config_value = params.config;
        })
        // 获取商品标签详情
        this.axios.get(config['gettags'], {
          params:{
            id: this.id
          }
        }).then( res => {
          // console.log(res.data)
          this.tags = (res.data.tags).join(',')
        })
      },
      upd_good:function(){
        // 修改商品信息
        var parms = {};
        parms["color"] = this.color;
        parms["size"] = this.size;
        parms["config"] = this.config_value;
        JSON.stringify(parms); // 将实体转换成字符串的形式
        this.axios.get(config['updgood'], {
          params: {
            id: this.id,
            name: this.name,
            desc: this.biaoqian(this.desc),
            price: this.price,
            cate_id: this.cate_id,
            parms: parms
          }
        }).then(res => {
          this.$Message(res.data.message);
        });
        // 修改标签
        this.axios.get('http://localhost:8000/updtag/',{
          params:{
            id: this.id,
            tags: this.tags
          }
        }).then( res => {
          this.$Message(res.data.message);
        })
      },
      // 将在线文本编辑器中的html去除
      biaoqian:function(src){
        return src.replace(/<[^>]+>/g, "")
      }
    }
  };

</script>
<style>
  /* 控制编辑器高度 */
  .ql-editor{
    height: 300px;
  }
</style>
